<template>
    <div class="card bg-base-100 shadow-md">
        <div class="card-body flex flex-row">
            <!-- 第一列：64px*64px的软件图标 -->
            <div class="w-12 h-full flex flex-shrink-0 items-center cursor-pointer md:cursor-auto">
                <label :for="'modal_' + block.name" class="cursor-pointer">
                    <img v-if="block.icon" :src="block.icon" alt="Icon" class="w-12 h-12">
                    <div v-else class="w-12 h-12 bg-gray-200 border-2 border-gray-400 rounded-lg"></div>
                </label>
            </div>
            <!-- 第二列：标题、平台图标和描述 -->
            <div class="flex-grow mx-4">
                <label :for="'modal_' + block.name" class="cursor-pointer">
                    <h2 class="card-title text-base-content">{{ block.name }}</h2>
                </label>
                <!-- 平台图标 -->
                <div class="w-6 h-6 flex flex-row flex-shrink-0 space-x-2 my-2">
                    <img v-for="platform in block.platforms" :key="platform" :src="platform" :alt="platform">
                </div>
                <p class="text-base-content">{{ block.comment }}</p>
            </div>
            <!-- 第三列 下载链接和文档链接-->
            <div class="w-auto h-full hidden md:flex">
                <Detail :releases="block.releases" />
            </div>
        </div>
        <!-- DaisyUI Modal -->
        <input type="checkbox" :id="'modal_' + block.name" class="modal-toggle" v-model="modalOpen" />
        <div class="modal">
            <div class="modal-box">
                <Detail :releases="block.releases" />
            </div>
            <label class="modal-backdrop" :for="'modal_' + block.name" />
        </div>
    </div>
</template>

<script>
import Detail from './Detail.vue';

export default {
    name: "Card",
    components: {
        Detail
    },
    props: {
        block: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            modalOpen: false
        };
    }
};
</script>
